<template>
    <view class="content">
        <view class="load_before" v-if="hideOver" :style="{opacity: loadOver ? 1 : 0}">
            
        </view>
        <block v-else>
            <block v-if="groupList.length>0">
                <!-- #ifdef MP-WEIXIN -->
                <view class="liner_red" :style="[{height:windowHeight + 'px', top:navH + 'px'}]"></view>
                <view class="fixed">
                    <top-nav :inner-title="title" :navTip="navTip" is-show-back="true" is-fixed="false" :navH="navH" :n="n" is-white="bg-red" opacity="1"></top-nav>
                    <!-- <view class="order-nav">
                        <view class="nav-scroll" :style="{left:leftNav + 'px'}">
                            <view class="order-info">
                                <icon></icon>
                                <text>阳同学刚刚上了肯德基的车</text>
                            </view>
                            <view class="order-info">
                                <icon></icon>
                                <text>阳同学刚刚上了肯德基的车</text>
                            </view>
                            <view class="order-info">
                                <icon></icon>
                                <text>阳同学刚刚上了肯德基的车</text>
                            </view>
                        </view>
                    </view> -->
                </view>
                <view :style="{height:navH + 'px'}"></view>
                
                
                <view class="group-steps flex column">
                    <view class="group-step flex">
                       <icon class="shopping-cart"></icon> 
                       <view class="dotted"></view>
                       <icon class="shopping-member"></icon> 
                       <view class="dotted"></view>
                       <icon class="goods-car"></icon>      
                    </view>
                    <view class="group-step flex">
                        <view class="text flex">选择商品下单</view>
                        <view class="text flex">开车成功</view>
                        <view class="text flex">到点发车</view>
                    </view>
                </view>
                <!-- #endif -->
               
                <view class="store-list">
                    <block v-for="(item,index) in groupList" :key="index">
                        <view class="group-item">
                            <view class="group-item-left">
                                <image :src="item.icon_url" @click="openStore(item.store_id)"  lazy-load="true"></image>
                                <view class="red-tag" v-if="item.person_num>0">{{item.person_num}}人已上车</view>
                            </view>
                            <view class="group-item-right">
                                <view class="title ellipsis" v-if="item.shop_name">{{item.shop_name}}</view>
                                <view class="current-time">
                                    <text v-if="item.finish_time">当前班次：{{item.finish_time}}</text>
                                </view>
                                <block v-if="item.wait_class.length>0">
                                    <view v-for="(item,index) in item.wait_class" :key="index" class="wait-time" :class=" idx == 0?'t1':''">剩余班次：{{item}}</view>
                                </block>
                                <block v-else>
                                    <view class="wait-time" :class=" idx == 0?'t1':''">剩余班次：待定</view>
                                </block>
                                <button @click="openStore(item.store_id)" class="btn">立即上车</button>
                            </view>
                        </view>
                    </block>
                </view>
                <view class="no-more" v-if="noMore">更多商家接入中，敬请期待！</view>
            </block>
            <block v-else>
                <!-- #ifdef MP-WEIXIN -->
                <top-nav inner-title="精选车次" is-show-back="true" is-fixed="false" :navH="navH" :n="n" is-white="bg-white" opacity="1"></top-nav>
                <view :style="{height: navH + 'px'}"></view>
                <!-- #endif -->
                <view class='empty' @click="loadData()">
                  <view class='img'></view>
                  <view class="flex">
                      <icon class="cry_face"></icon>
                      <text>抱歉，暂无班次</text>
                  </view>                 
                </view> 
            </block>
        </block>
    </view>
</template>

<script>
    import uniFly from 'unifly';
	import request from '../../common/request.js';
	import $api_base from '../../api/api_base.js';
	import topNav from '@/template/topnav/index.vue';
    export default {
		components: { topNav },
		data() {
			return {
                loadOver : true,
                hideOver : true,
				groupList: [],
                navH     : 0,
                n        : 0,
                title    : '',
                schoolId : 0,
                leftNav  : 0,
                windowHeight :getApp().globalData.windowHeight-200
			}
		},
		onLoad(options){
            let pages     = getCurrentPages();
            let prevPage  = pages[pages.length - 2];
            
            prevPage.$vm.fromPage = 'storeSearch';
			this.navH     = getApp().globalData.navHeight;
            this.n        = getApp().globalData.n;
            this.schoolId = options.schoolId || '16';
            this.leftNav  = getApp().globalData.windowWidth;
            // #ifdef MP-ALIPAY
            uni.setNavigationBarTitle({
              title: '开车专区'
            })
            // #endif
            
            this.loadData(false);
        },
		onShow(optons){
			
		},
		methods:{
            loadData: function (isAppend) {
                var schoolId = this.schoolId;
                var self  = this;
                this.navH = getApp().globalData.navHeight;
                this.n    = getApp().globalData.n;
                this.leftNav  = getApp().globalData.windowWidth/2;
                $api_base.post($api_base.getGroupList,{school_id: schoolId}).then(function(e){
                    let data = e.data;
                    if (data.ok == 1) {
                        self.groupList = data.groupList;
                        setTimeout(function(){ self.loadOver = false; },300);
                        setTimeout(function(){ self.hideOver = false; },600); 
                    }
                });
            },
           
			openStore: function (e) {
                var storeId = e;
                uni.navigateTo({
                    url: '/pages/goods/goods?storeId=' + storeId + '&sid=group',
                })
            },
			/**
			 * 页面相关事件处理函数--监听用户下拉动作
			 */
			onPullDownRefresh: function () {
				uni.stopPullDownRefresh();
			},
			/**
			 * 页面上拉触底事件的处理函数
			 */
			onReachBottom: function () {
			  this.noMore = true;
			}
		}
	}
</script>
<style>
    /* #ifdef MP-ALIPAY */
    page{
        background-color: #fff;
    }
    /* #endif */
</style>
<style lang="scss" scoped>
	@import 'index.scss';
</style>

